<!DOCTYPE html>
<!--
/*
 * DMFE - Dirty Mesh Front End
 *
 * A simple HTML5 browser app to let untrained users
 * communicate over an ad-hoc network,
 * possibly during an internet outage.
 *
 * Copyright 2013 Dean Hall.
 * See LICENSE.txt for details.
 */
-->
<html>
<head>
    <title>DMFE</title>
    <style>
    img,canvas,iframe,video,svg{max-width:100%}
    .overflow-container{overflow-y:scroll;
    -webkit-overflow-scrolling:touch}
    </style>
</head>

<body id="dmfe_body">
    <script type="text/javascript" src="dmfe.js"></script>
    <script type="text/javascript" src="sjcl.js"></script>

    <header id="Header">
        <select id="PageSelect" onchange="showSection(getSelected())">
                <option value="Welcome">Welcome</option>
                <option value="Identity">Identity</option>
        </select>

        <p id="HeaderId">Identity: (none)</p>
    </header>

    <section id="Welcome">
        <h1>Welcome</h1>
        <p id="WelcomeParagraph">
        The regular internet is not available.
        Create your identity and you will be presented with a dashboard of what you can do on this network.
        </p>

    </section>

    <section id="Identity" hidden>
        <h1>Identity</h1>
        <p>
            The information you give here is used to create your identity certificate.
            On this network, we take identity very seriously.  Use your real, legal name
            or else others may not certify your identity and you will lack trust.
            Do this right the first time because if you change any values,
            you will lose the endorsements of your peers.
            The generated identity certificate will be stored locally on this device
            and shared on the mesh, when requested.
        </p>
        <table>
        <tbody>
        <tr>
            <td>First name:</td>
            <td> <input type="text" id="IdentityFirstNameTextBox"/> </td>
        </tr>
        <tr>
            <td>Last name:</td>
            <td> <input type="text" id="IdentityLastNameTextBox"/> </td>
        </tr>
        <tr>
            <td>Email:</td>
            <td> <input type="text" id="IdentityEmailTextBox"/> </td>
        </tr>
        <tr>
            <td>Licensed radio operator?</td>
            <td> <input type="checkbox" id="LicensedRadioOperatorCheckBox"
                        onchange="document.getElementById('IdentityCallsignLabel').hidden =
                                  document.getElementById('IdentityCallsignTextBox').hidden =
                                  !document.getElementById('LicensedRadioOperatorCheckBox').checked"/>
            </td>
        </tr>
        <tr>
            <td id="IdentityCallsignLabel" hidden>Callsign:</td>
            <td> <input type="text" id="IdentityCallsignTextBox" hidden style="text-transform: uppercase"/> </td>
        </tr>
        <tr>
            <!-- FIXME -->
            <td>Photo of your face:</td>
            <td>
                <!--
                <input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">
                -->
                <video id="facePhotoVideo" width="256" height="256" autoplay></video>
                <button id="facePhotoSnap" onclick="takePhoto">Take Photo</button>
                <canvas id="facePhotoCanvas" width="256" height="256"></canvas>
            </td>
        </tr>
        <tr>
            <td></td>
            <td> <button id="IdentityGenerateButton" onclick="generateIdentityCert()">Generate Identity Certificate</button> </td>
        </tr>
        </tbody>
        </table>
    </section>

    <section id="Dash" hidden>
        <h1>Dash</h1>
    </section>

    <footer id="Footer">
        Footer content is TBD
    </footer>
</body>
</html>
